<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot;Hello AngularJS</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <style>
        .demo{
            margin-bottom:10px;
            border-top:1px solid #1b926c;
        }
         footer{
             color:#fff;
             background-color: #222;
             border-color: #080808;
             padding-top:60px;
             margin-top:100px;
         }
    </style>
</head>
<body>
<div class="row">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="../index.html">首页</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="javascript:void(0)">Link</a></li>
                <li><a href="javascript:void(0)">Link2</a></li>
            </ul>
        </div>
    </nav>
</div>
 <div class="container" ng-app="MyAPP">
     <siteheader></siteheader>
     <h3>指令示例，防手机ListView</h3>
     <div ng-controller="ListViewCtrl">
         <ul class="list-group">
             <li class="list-group-item" ng-repeat="item in mydata">
                 <listitem ng-model="item" callback="show()"></listitem>
             </li>
         </ul>
     </div>
     <sitefooter></sitefooter>
 </div>
</body>
</html>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js" type="text/javascript"></script>
<script src="http://cdn.bootcss.com/jquery/1.12.0/jquery.min.js"></script>
<script>
    var app=angular.module("MyAPP",[]);
    app.directive('sitelogo', function () {
       return {
           restrict:"E",
           replace:true,
           templateUrl:"views/logo_tpl.html"
       }
    });
    app.directive('siteheader',function(){
        return {
            restrict:"E",
            replace:true,
            templateUrl:"views/header_tpl.html"
        }
    });
    app.directive('sitefooter',function(){
        return {
            restrict:"E",
            replace:true,
            templateUrl:"views/footer_tpl.html"
        }
    });

    //列表项
    app.directive('listitem',function($window){
        return {
            restrict:"E",
            replace:true,
            templateUrl:"views/listitem_tpl.html",
            require: ['^ngModel'], //要求必须有ng-model指令
            scope:{
                ngModel:'=',
                callback:'&'
            },
            link:function(scope,ele,attr){
                console.log(scope.ngModel);

                //angular中的jqLite不支持class名字查找,文档：https://docs.angularjs.org/api/ng/function/angular.element
                //ele.find(".mybtn").on("click",function(){
                //    $window.alert(scope.ngModel.num+","+scope.ngModel.title);
                //});

                //也不能
                //ele.find('#mybtn'+scope.ngModel.num).on("click",function(){
                //    $window.alert(scope.ngModel.num+","+scope.ngModel.title);
                //});

               //也不能
               //angular.element('#mybtn'+scope.ngModel.num).on("click",function(){
               //    window.alert(scope.ngModel.num+","+scope.ngModel.title);
               //});

                //不好使
                //var myEl = angular.element( document.querySelector('#mybtn1'));
                //myEl.on("click",function(){
                 //   $window.alert(scope.ngModel.num+","+scope.ngModel.title);
                //});

                //最后感觉很无赖，只好借助jQuery操作DOM了
                $(ele).find(".mybtn").on("click",function(){
                    $window.alert(scope.ngModel.num+","+scope.ngModel.title);
                    $(ele).attr("style","border:3px solid green");
                });

            }
        }
    });

    app.controller('ListViewCtrl',function($scope,$window){
        $scope.mydata=[{
            num:1,
            title:"我是标题党一"
        },{
            num:2,
            title:"我是标题党二"
        },{
            num:3,
            title:"我是标题党三"
        },{
            num:4,
            title:"我是标题党四"
        }];

        $scope.show=function(){
            $window.alert("controller 回调");
        }
    });

</script>